import { defineComponent, onMounted, PropType, reactive, watch } from "vue"
import { CnBoldSpan } from "../text"

export const OnOrOff = defineComponent({
  props: {
    checked: {
      type: String as PropType<'1' | '2'>
    }
  },
  emits: {
    'update:checked': (checked: '1' | '2'): boolean => true
  },
  setup(props, { emit }) {
    let state = reactive<{
      checked: '1' | '2' | undefined
    }>({
      checked: '1'
    })
    watch(() => props.checked, n => {
      state.checked = n
    })

    onMounted(() => {
      state.checked = props.checked || '1'
    })
    return () => (
      state.checked ? <a-switch
        v-model={[state.checked, 'checked']}
        checkedChildren='开'
        checkedValue='1'
        unCheckedChildren='关'
        unCheckedValue='2'
        onChange={(checked: any) => {
          emit('update:checked', checked)
        }}
      ></a-switch>
        :
        <CnBoldSpan class='text-danger'>获取失败</CnBoldSpan>
    )
  },
})